From eb9b7f45b93b446366db53eb0e4f5e02cefd78d2 Mon Sep 17 00:00:00 2001
From: Andrea Bogazzi <andreabogazzi79@gmail.com>
Date: Sat, 21 May 2016 15:07:04 +0200
Subject: [PATCH] Add ID to svg export (#2993)

---
 src/mixins/object.svg_export.js | 8 ++++++++
 src/shapes/circle.class.js      | 2 +-
 src/shapes/ellipse.class.js     | 2 +-
 src/shapes/group.class.js       | 2 +-
 src/shapes/image.class.js       | 2 +-
 src/shapes/line.class.js        | 2 +-
 src/shapes/path.class.js        | 2 +-
 src/shapes/path_group.class.js  | 2 +-
 src/shapes/polygon.class.js     | 2 +-
 src/shapes/rect.class.js        | 2 +-
 src/shapes/text.class.js        | 2 +-
 src/shapes/triangle.class.js    | 2 +-
 test/unit/rect.js               | 6 ++++++
 13 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/src/mixins/object.svg_export.js b/src/mixins/object.svg_export.js
index 3689021bcae..bfea0eb036d 100644
--- a/src/mixins/object.svg_export.js
+++ b/src/mixins/object.svg_export.js
@@ -63,6 +63,14 @@
       return this.shadow ? 'filter: url(#SVGID_' + this.shadow.id + ');' : '';
     },
 
+    /**
+     * Returns id attribute for svg output
+     * @return {String}
+     */
+    getSvgId: function() {
+      return this.id ? 'id="' + this.id + '" ' : '';
+    },
+
     /**
      * Returns transform-string for svg-export
      * @return {String}
diff --git a/src/shapes/circle.class.js b/src/shapes/circle.class.js
index e3b386b3c02..3363cc03b19 100644
--- a/src/shapes/circle.class.js
+++ b/src/shapes/circle.class.js
@@ -107,7 +107,7 @@
           y = this.top + this.radius;
         }
         markup.push(
-          '<circle ',
+          '<circle ', this.getSvgId(),
             'cx="' + x + '" cy="' + y + '" ',
             'r="', this.radius,
             '" style="', this.getSvgStyles(),
diff --git a/src/shapes/ellipse.class.js b/src/shapes/ellipse.class.js
index be139d7d4d5..f9b7b1379dc 100644
--- a/src/shapes/ellipse.class.js
+++ b/src/shapes/ellipse.class.js
@@ -120,7 +120,7 @@
         y = this.top + this.ry;
       }
       markup.push(
-        '<ellipse ',
+        '<ellipse ', this.getSvgId(),
           'cx="', x, '" cy="', y, '" ',
           'rx="', this.rx,
           '" ry="', this.ry,
diff --git a/src/shapes/group.class.js b/src/shapes/group.class.js
index cd15ec65262..094d03e275a 100644
--- a/src/shapes/group.class.js
+++ b/src/shapes/group.class.js
@@ -463,7 +463,7 @@
     toSVG: function(reviver) {
       var markup = this._createBaseSVGMarkup();
       markup.push(
-        '<g transform="',
+        '<g ', this.getSvgId(), 'transform="',
         /* avoiding styles intentionally */
         this.getSvgTransform(),
         this.getSvgTransformMatrix(),
diff --git a/src/shapes/image.class.js b/src/shapes/image.class.js
index 110da33f5bf..24db86a9f47 100644
--- a/src/shapes/image.class.js
+++ b/src/shapes/image.class.js
@@ -261,7 +261,7 @@
       }
       markup.push(
         '<g transform="', this.getSvgTransform(), this.getSvgTransformMatrix(), '">\n',
-          '<image xlink:href="', this.getSvgSrc(),
+          '<image ', this.getSvgId(), 'xlink:href="', this.getSvgSrc(),
             '" x="', x, '" y="', y,
             '" style="', this.getSvgStyles(),
             // we're essentially moving origin of transformation from top/left corner to the center of the shape
diff --git a/src/shapes/line.class.js b/src/shapes/line.class.js
index 32a8ae14fd7..96be50209f4 100644
--- a/src/shapes/line.class.js
+++ b/src/shapes/line.class.js
@@ -239,7 +239,7 @@
         p = this.calcLinePoints();
       }
       markup.push(
-        '<line ',
+        '<line ', this.getSvgId(),
           'x1="', p.x1,
           '" y1="', p.y1,
           '" x2="', p.x2,
diff --git a/src/shapes/path.class.js b/src/shapes/path.class.js
index 0db5d06065e..5177f840131 100644
--- a/src/shapes/path.class.js
+++ b/src/shapes/path.class.js
@@ -511,7 +511,7 @@
       }
       markup.push(
         //jscs:disable validateIndentation
-        '<path ',
+        '<path ', this.getSvgId(),
           'd="', path,
           '" style="', this.getSvgStyles(),
           '" transform="', this.getSvgTransform(), addTransform,
diff --git a/src/shapes/path_group.class.js b/src/shapes/path_group.class.js
index b761e06fb09..2cce0c2c451 100644
--- a/src/shapes/path_group.class.js
+++ b/src/shapes/path_group.class.js
@@ -177,7 +177,7 @@
           translatePart = 'translate(' + p.x + ' ' + p.y + ')',
           markup = this._createBaseSVGMarkup();
       markup.push(
-        '<g ',
+        '<g ', this.getSvgId(),
         'style="', this.getSvgStyles(), '" ',
         'transform="', this.getSvgTransformMatrix(), translatePart, this.getSvgTransform(), '" ',
         '>\n'
diff --git a/src/shapes/polygon.class.js b/src/shapes/polygon.class.js
index 518d043eeaf..a1a001bd662 100644
--- a/src/shapes/polygon.class.js
+++ b/src/shapes/polygon.class.js
@@ -118,7 +118,7 @@
         addTransform = ' translate(' + (-this.pathOffset.x) + ', ' + (-this.pathOffset.y) + ') ';
       }
       markup.push(
-        '<', this.type, ' ',
+        '<', this.type, ' ', this.getSvgId(),
           'points="', points.join(''),
           '" style="', this.getSvgStyles(),
           '" transform="', this.getSvgTransform(), addTransform,
diff --git a/src/shapes/rect.class.js b/src/shapes/rect.class.js
index 92b7a6f1ef2..d6efd2820a9 100644
--- a/src/shapes/rect.class.js
+++ b/src/shapes/rect.class.js
@@ -172,7 +172,7 @@
         y = -this.height / 2;
       }
       markup.push(
-        '<rect ',
+        '<rect ', this.getSvgId(),
           'x="', x, '" y="', y,
           '" rx="', this.get('rx'), '" ry="', this.get('ry'),
           '" width="', this.width, '" height="', this.height,
diff --git a/src/shapes/text.class.js b/src/shapes/text.class.js
index b28ad42fcf0..a3c9d4aadf8 100644
--- a/src/shapes/text.class.js
+++ b/src/shapes/text.class.js
@@ -927,7 +927,7 @@
           style = filter === '' ? '' : ' style="' + filter + '"';
 
       markup.push(
-        '\t<g transform="', this.getSvgTransform(), this.getSvgTransformMatrix(), '"',
+        '\t<g ', this.getSvgId(), 'transform="', this.getSvgTransform(), this.getSvgTransformMatrix(), '"',
           style, '>\n',
           textAndBg.textBgRects.join(''),
           '\t\t<text ',
diff --git a/src/shapes/triangle.class.js b/src/shapes/triangle.class.js
index fcced7a46b4..3d85715925d 100644
--- a/src/shapes/triangle.class.js
+++ b/src/shapes/triangle.class.js
@@ -90,7 +90,7 @@
           .join(',');
 
       markup.push(
-        '<polygon ',
+        '<polygon ', this.getSvgId(),
           'points="', points,
           '" style="', this.getSvgStyles(),
           '" transform="', this.getSvgTransform(),
diff --git a/test/unit/rect.js b/test/unit/rect.js
index 6e28a17c21b..f1c9cf72eff 100644
--- a/test/unit/rect.js
+++ b/test/unit/rect.js
@@ -153,6 +153,12 @@
     equal(svg, '<rect x="-50" y="-50" rx="0" ry="0" width="100" height="100" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,0,0); fill-opacity: 0.5; fill-rule: nonzero; opacity: 1;" transform="translate(50 50)"/>\n');
   });
 
+  test('toSVG with id', function() {
+    var rect = new fabric.Rect({id: 'myRect', width: 100, height: 100, strokeWidth: 0, fill: 'rgba(255, 0, 0, 0.5)' });
+    var svg = rect.toSVG();
+    equal(svg, '<rect id="myRect" x="-50" y="-50" rx="0" ry="0" width="100" height="100" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,0,0); fill-opacity: 0.5; fill-rule: nonzero; opacity: 1;" transform="translate(50 50)"/>\n');
+  });
+
   test('toSVG with alpha colors stroke', function() {
     var rect = new fabric.Rect({ width: 100, height: 100, strokeWidth: 0, fill: '', stroke: 'rgba(255, 0, 0, 0.5)' });
     var svg = rect.toSVG();