DRAFT: SVG export and isPath removal

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## [next]
 
+- DRAFT: SVG export and isPath removal [#9488](https://github.com/fabricjs/fabric.js/pull/9488)
 - chore(): remove some Type assertions [#8950](https://github.com/fabricjs/fabric.js/pull/8950)
 - chore(): expose `sendVectorToPlane` [#9479](https://github.com/fabricjs/fabric.js/pull/9479)
 - BREAKING: remove absolute true/false from the api. [#9395](https://github.com/fabricjs/fabric.js/pull/9395)

src/gradient/Gradient.ts

@@ -19,7 +19,6 @@ import type {
   SVGOptions,
 } from './typedefs';
 import { classRegistry } from '../ClassRegistry';
-import { isPath } from '../util/typeAssertions';
 
 /**
  * Gradient class
@@ -199,8 +198,8 @@ export class Gradient<
       offsetX += object.width / 2;
       offsetY += object.height / 2;
     }
-    // todo what about polygon/polyline?
-    if (isPath(object) && this.gradientUnits !== 'percentage') {
+
+    if (object.pathOffset && this.gradientUnits !== 'percentage') {
       offsetX -= object.pathOffset.x;
       offsetY -= object.pathOffset.y;
     }

src/util/typeAssertions.ts

@@ -3,7 +3,6 @@ import type { TFiller } from '../typedefs';
 import type { FabricText } from '../shapes/Text/Text';
 import type { Pattern } from '../Pattern';
 import type { ActiveSelection } from '../shapes/ActiveSelection';
-import type { Path } from '../shapes/Path';
 
 export const isFiller = (
   filler: TFiller | string | null
@@ -38,9 +37,3 @@ export const isTextObject = (
   // @todo discuss what to do and how to do
   return !!fabricObject && fabricObject.isType('Text', 'IText', 'Textbox');
 };
-
-export const isPath = (fabricObject?: FabricObject): fabricObject is Path => {
-  // we could use instanceof but that would mean pulling in Text code for a simple check
-  // @todo discuss what to do and how to do
-  return !!fabricObject && fabricObject.isType('Path');
-};

test/visual/svg_import.js

@@ -100,6 +100,7 @@
     'light-bulb',
     'accordion',
     'car',
+    'svg_linear_8_gradient_offset',
   ].map(createTestFromSVG);
 
   tests.forEach(visualTestLoop(QUnit));

test/visual/z_svg_export.js

@@ -418,6 +418,22 @@
     height: 760,
   });
 
+  function multipleGradientsOffset(canvas, callback) {
+    fabric.loadSVGFromURL(getAssetName('svg_linear_8_gradient_offset')).then(({ objects }) => {
+      canvas.add(...objects);
+      toSVGCanvas(canvas, callback);
+    });
+  }
+
+  tests.push({
+    test: 'Multiple gradients import for offset',
+    code: multipleGradientsOffset,
+    golden: 'multipleGradientsOffset.png',
+    percentage: 0.06,
+    width: 450,
+    height: 470,
+  });
+
   function pathWithGradientSvg(canvas, callback) {
     var pathWithGradient = new fabric.Path('M 0 0 L 0 100 L 100 100 L 100 0 Z', {
       fill: new fabric.Gradient({