Add support for G tags

maxwellito · Aug 14, 2017 · b248f8e · b248f8e
1 parent 4e1ea5f
commit b248f8e
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 9 deletions.
diff --git a/dist/vivus.js b/dist/vivus.js
@@ -40,7 +40,9 @@ function Pathformer(element) {
       throw new Error('Pathformer [constructor]: "element" parameter is not related to an existing ID');
     }
   }
-  if (element.constructor instanceof window.SVGElement || /^svg$/i.test(element.nodeName)) {
+  if (element instanceof window.SVGElement || 
+      element instanceof window.SVGGElement ||
+      /^svg$/i.test(element.nodeName)) {
     this.el = element;
   } else {
     throw new Error('Pathformer [constructor]: "element" parameter must be a string or a SVGelement');
@@ -394,6 +396,7 @@ Vivus.prototype.setElement = function (element, options) {
   switch (element.constructor) {
   case window.SVGSVGElement:
   case window.SVGElement:
+  case window.SVGGElement:
     this.el = element;
     this.isReady = true;
     break;

diff --git a/dist/vivus.min.js b/dist/vivus.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vivus",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "JavaScript library to make drawing animation on SVG",
   "main": "dist/vivus.js",
   "scripts": {

diff --git a/src/pathformer.js b/src/pathformer.js
@@ -29,7 +29,9 @@ function Pathformer(element) {
       throw new Error('Pathformer [constructor]: "element" parameter is not related to an existing ID');
     }
   }
-  if (element.constructor instanceof window.SVGElement || /^svg$/i.test(element.nodeName)) {
+  if (element instanceof window.SVGElement || 
+      element instanceof window.SVGGElement ||
+      /^svg$/i.test(element.nodeName)) {
     this.el = element;
   } else {
     throw new Error('Pathformer [constructor]: "element" parameter must be a string or a SVGelement');

diff --git a/src/vivus.js b/src/vivus.js
@@ -126,6 +126,7 @@ Vivus.prototype.setElement = function (element, options) {
   switch (element.constructor) {
   case window.SVGSVGElement:
   case window.SVGElement:
+  case window.SVGGElement:
     this.el = element;
     this.isReady = true;
     break;

diff --git a/test/unit/pathformer.spec.js b/test/unit/pathformer.spec.js
@@ -7,7 +7,9 @@
 describe('Pathformer', function () {
 
   var svgTag,
-    svgTagId = 'my-svg';
+    svgTagId = 'my-svg',
+    svgGroupTag,
+    svgGroupTagId = 'my-svg-group';
 
   beforeEach(function () {
     // Remove tag if existing
@@ -18,13 +20,17 @@ describe('Pathformer', function () {
 
     // Create the SVG
     svgTag = document.createElementNS('http://www.w3.org/2000/svg','svg');
-    svgTag.id = 'my-svg';
+    svgTag.id = svgTagId;
     svgTag.innerHTML = '<circle fill="none" stroke="#f9f9f9" stroke-width="3" stroke-miterlimit="10" cx="100" cy="100" r="72.947"/>' +
       '<circle fill="none" stroke="#f9f9f9" stroke-width="3" stroke-miterlimit="10" cx="100" cy="100" r="39.74"/>' +
+      '<g id="' + svgGroupTagId + '">' +
       '<line fill="none" stroke="#f9f9f9" stroke-width="3" stroke-miterlimit="10" x1="34.042" y1="131.189" x2="67.047" y2="77.781"/>' +
       '<line fill="none" stroke="#f9f9f9" stroke-width="3" stroke-miterlimit="10" x1="165.957" y1="68.809" x2="132.953" y2="122.219"/>' +
       '<line fill="none" stroke="#f9f9f9" stroke-width="3" stroke-miterlimit="10" x1="131.19" y1="165.957" x2="77.781" y2="132.953"/>' +
-      '<line fill="none" stroke="#f9f9f9" stroke-width="3" stroke-miterlimit="10" x1="68.81" y1="34.042" x2="122.219" y2="67.046"/>';
+      '<line fill="none" stroke="#f9f9f9" stroke-width="3" stroke-miterlimit="10" x1="68.81" y1="34.042" x2="122.219" y2="67.046"/>' +
+      '</g>';
+
+    svgGroupTag = svgTag.querySelector('#'+svgGroupTagId);
 
     // Insert it to the body
     document.body.appendChild(svgTag);
@@ -51,6 +57,12 @@ describe('Pathformer', function () {
       }).not.toThrow();
     });
 
+    it('should work with only the SVG group object', function () {
+      expect(function () {
+        new Pathformer(svgGroupTag);
+      }).not.toThrow();
+    });
+
     it('should throw an error if the SVG ID given is invalid', function () {
       expect(function () {
         new Pathformer('my-unexisting-svg');

diff --git a/test/unit/vivus.spec.js b/test/unit/vivus.spec.js
@@ -12,7 +12,8 @@ describe('Vivus', function () {
     objTag,
     wrapTag,
     svgTag,
-    svgTagId = 'my-svg';
+    svgTagId = 'my-svg',
+    svgGroupTagId = 'my-svg-group';
 
   // Mock ObjectElement and it's constructor via createElement
   ObjectElementMock = function () {
@@ -60,7 +61,7 @@ describe('Vivus', function () {
     svgTag.id = svgTagId;
     svgTag.innerHTML = '<circle fill="none" stroke="#f9f9f9" stroke-width="3" stroke-miterlimit="10" cx="100" cy="100" r="72.947"/>' +
       '<circle fill="none" stroke="#f9f9f9" stroke-width="3" stroke-miterlimit="10" cx="100" cy="100" r="39.74"/>' +
-      '<g>' +
+      '<g id="' + svgGroupTagId + '">' +
         '<line fill="none" stroke="#f9f9f9" stroke-width="3" stroke-miterlimit="10" x1="34.042" y1="131.189" x2="67.047" y2="77.781"/>' +
         '<line fill="none" stroke="#f9f9f9" stroke-width="3" stroke-miterlimit="10" x1="165.957" y1="68.809" x2="132.953" y2="122.219"/>' +
         '<line fill="none" stroke="#f9f9f9" stroke-width="3" stroke-miterlimit="10" x1="131.19" y1="165.957" x2="77.781" y2="132.953"/>' +
@@ -131,6 +132,12 @@ describe('Vivus', function () {
       }).not.toThrow();
     });
 
+    it('should work with the SVG group object', function () {
+      expect(function () {
+        new Vivus(svgGroupTagId);
+      }).not.toThrow();
+    });
+
     it('should throw an error if the SVG ID given is invalid', function () {
       expect(function () {
         new Vivus('my-unexisting-svg');