improve fabric.Pattern toSvg (#5164)

* fixed pattern toSVG * better patterns * fixed pattern and added tests * better src
fabricjs · Aug 11, 2018 · 4c2f91d · 4c2f91d
1 parent 6994b04
commit 4c2f91d
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 1 deletion.
diff --git a/src/pattern.class.js b/src/pattern.class.js
@@ -133,9 +133,16 @@
           patternImgSrc = '';
       if (this.repeat === 'repeat-x' || this.repeat === 'no-repeat') {
         patternHeight = 1;
+        if (patternOffsetY) {
+          patternHeight += Math.abs(patternOffsetY);
+        }
       }
       if (this.repeat === 'repeat-y' || this.repeat === 'no-repeat') {
         patternWidth = 1;
+        if (patternOffsetX) {
+          patternWidth += Math.abs(patternOffsetX);
+        }
+
       }
       if (patternSource.src) {
         patternImgSrc = patternSource.src;

diff --git a/test/unit/pattern.js b/test/unit/pattern.js
@@ -143,11 +143,54 @@
   });
 
   QUnit.test('toSVG', function(assert) {
+    fabric.Object.__uid = 0;
     var pattern = createPattern();
+    var rect = new fabric.Rect({ width: 500, height: 500 });
+    var expectedSVG = '<pattern id="SVGID_0" x="0" y="0" width="0.3" height="0.248">\n<image x="0" y="0" width="150" height="124" xlink:href="' + img.src + '"></image>\n</pattern>\n';
+    assert.ok(typeof pattern.toSVG === 'function');
+    assert.equal(pattern.toSVG(rect), expectedSVG, 'SVG match');
+  });
+
+  QUnit.test('toSVG repeat-y', function(assert) {
+    fabric.Object.__uid = 0;
+    var pattern = createPattern();
+    pattern.repeat = 'repeat-y';
+    var rect = new fabric.Rect({ width: 500, height: 500 });
+    var expectedSVG = '<pattern id="SVGID_0" x="0" y="0" width="1" height="0.248">\n<image x="0" y="0" width="150" height="124" xlink:href="' + img.src + '"></image>\n</pattern>\n';
+    assert.ok(typeof pattern.toSVG === 'function');
+    assert.equal(pattern.toSVG(rect), expectedSVG, 'SVG match repeat-y');
+  });
+
+  QUnit.test('toSVG repeat-x', function(assert) {
+    fabric.Object.__uid = 0;
+    var pattern = createPattern();
+    pattern.repeat = 'repeat-x';
+    var rect = new fabric.Rect({ width: 500, height: 500 });
+    var expectedSVG = '<pattern id="SVGID_0" x="0" y="0" width="0.3" height="1">\n<image x="0" y="0" width="150" height="124" xlink:href="' + img.src + '"></image>\n</pattern>\n';
+    assert.ok(typeof pattern.toSVG === 'function');
+    assert.equal(pattern.toSVG(rect), expectedSVG, 'SVG match repeat-x');
+  });
 
+  QUnit.test('toSVG no-repeat', function(assert) {
+    fabric.Object.__uid = 0;
+    var pattern = createPattern();
+    pattern.repeat = 'no-repeat';
+    var rect = new fabric.Rect({ width: 500, height: 500 });
+    var expectedSVG = '<pattern id="SVGID_0" x="0" y="0" width="1" height="1">\n<image x="0" y="0" width="150" height="124" xlink:href="' + img.src + '"></image>\n</pattern>\n';
     assert.ok(typeof pattern.toSVG === 'function');
+    assert.equal(pattern.toSVG(rect), expectedSVG, 'SVG match no-repeat');
+  });
 
-    // TODO: test toSVG
+  QUnit.test('toSVG no-repeat offsetX and offsetY', function(assert) {
+    fabric.Object.__uid = 0;
+    var pattern = createPattern();
+    pattern.repeat = 'no-repeat';
+    pattern.offsetX = 50;
+    pattern.offsetY = -50;
+    var rect = new fabric.Rect({ width: 500, height: 500 });
+    var expectedSVG = '<pattern id="SVGID_0" x="0.1" y="-0.1" width="1.1" height="1.1">\n<image x="0" y="0" width="150" height="124" xlink:href="' + img.src + '"></image>\n</pattern>\n';
+    assert.ok(typeof pattern.toSVG === 'function');
+    assert.equal(pattern.toSVG(rect), expectedSVG, 'SVG match no-repat offsetX and offsetY');
   });
 
   QUnit.test('initPattern from object', function(assert) {