fix: dtyle conflict with multiple gauges created using the "parentNode" method

justgage.js

@@ -60,6 +60,10 @@
       // id : string
       // this is container element id
       id: config.id,
+
+      // classId : string
+      // this is the class id utilize when generating styles
+      classId: uuid(),
 
       // value : float
       // value gauge is showing
@@ -1259,7 +1263,7 @@
    */
   JustGage.prototype.generateShadow = function (svg, defs) {
     const obj = this;
-    const sid = "inner-shadow-" + obj.config.id;
+    const sid = "inner-shadow-" + (obj.config.classId || obj.config.id);
 
     // FILTER
     const gaussFilter = document.createElementNS(svg, "filter");
@@ -1312,11 +1316,11 @@
     if (obj.config.showInnerShadow) {
       obj.canvas.canvas.childNodes[2].setAttribute(
         "filter",
-        "url(" + window.location.pathname + "#" + sid + ")"
+        "url(#" + sid + ")"
       );
       obj.canvas.canvas.childNodes[3].setAttribute(
         "filter",
-        "url(" + window.location.pathname + "#" + sid + ")"
+        "url(#" + sid + ")"
       );
     }
   };
@@ -1573,5 +1577,20 @@
     return n !== null && n !== undefined && !isNaN(n);
   }
 
+  /**
+   * Generate UUID
+   * @returns UUID
+   */
+  function uuid() {
+    return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
+      /[xy]/g,
+      function (c) {
+        const r = (Math.random() * 16) | 0;
+        const v = c === "x" ? r : (r & 0x3) | 0x8;
+        return v.toString(16);
+      }
+    );
+  }
+
   return JustGage;
 });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "justgage",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "description": "JustGage is a handy JavaScript plugin for generating and animating nice & clean gauges. It is based on Raphaël library for vector drawing, so it’s completely resolution independent and self-adjusting.",
   "main": "index.js",
   "scripts": {