Fixed SvgExport in path with gradient and added tests

Kittl · Oct 16, 2020 · 66b6e05 · 66b6e05
1 parent 4f48cc5
commit 66b6e05
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 5 deletions.
diff --git a/src/gradient.class.js b/src/gradient.class.js
@@ -238,11 +238,6 @@
         offsetX += object.width / 2;
         offsetY += object.height / 2;
       }
-      if (object.type === 'path') {
-        offsetX -= object.pathOffset.x;
-        offsetY -= object.pathOffset.y;
-      }
-
 
       transform[4] -= offsetX;
       transform[5] -= offsetY;

diff --git a/test/visual/generic_rendering.js b/test/visual/generic_rendering.js
@@ -332,5 +332,34 @@
     height: 400,
   });
 
+  function pathWithGradient(canvas, callback) {
+    var pathWithGradient = new fabric.Path("M 0 0 L 0 100 L 100 100 L 100 0 Z", {
+      fill: new fabric.Gradient({
+        gradientUnits: "percentage",
+        coords: { x1: 0, y1: 0, x2: 0, y2: 1 },
+        colorStops: [
+          { offset: 0, color: "red" },
+          { offset: 1, color: "black" }
+        ]
+      }),
+      height: 100,
+      width: 100,
+      top: 0,
+      left: 0
+    });
+    canvas.add(pathWithGradient);
+    canvas.renderAll();
+    callback(canvas.lowerCanvasEl);
+  }
+
+  tests.push({
+    test: 'gradient should be applied to path',
+    code: pathWithGradient,
+    golden: 'pathWithGradient.png',
+    percentage: 0.06,
+    width: 100,
+    height: 100,
+  });
+
   tests.forEach(visualTestLoop(QUnit));
 })();
diff --git a/test/visual/golden/pathWithGradient.png b/test/visual/golden/pathWithGradient.png
diff --git a/test/visual/golden/pathWithGradientSvg.png b/test/visual/golden/pathWithGradientSvg.png
diff --git a/test/visual/z_svg_export.js b/test/visual/z_svg_export.js
@@ -416,5 +416,34 @@
     width: 760,
     height: 760,
   });
+
+  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({
+        gradientUnits: "percentage",
+        coords: { x1: 0, y1: 0, x2: 0, y2: 1 },
+        colorStops: [
+          { offset: 0, color: "red" },
+          { offset: 1, color: "black" }
+        ]
+      }),
+      height: 100,
+      width: 100,
+      top: 0,
+      left: 0
+    });
+    canvas.add(pathWithGradient);
+    toSVGCanvas(canvas, callback);
+  }
+
+  tests.push({
+    test: 'gradient should be applied to path in svg',
+    code: pathWithGradientSvg,
+    golden: 'pathWithGradientSvg.png',
+    percentage: 0.06,
+    width: 100,
+    height: 100,
+  });
+
   tests.forEach(visualTestLoop(QUnit));
 })();