feat: Add viewBox

wever-ko · Nov 23, 2018 · 932c8a6 · 932c8a6
1 parent d80f1d5
commit 932c8a6
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 23 deletions.
diff --git a/HalfCircleGauge/docs/exsvg.svg b/HalfCircleGauge/docs/exsvg.svg
diff --git a/HalfCircleGauge/halfCircleGauge.js b/HalfCircleGauge/halfCircleGauge.js
@@ -109,11 +109,11 @@ var HalfCircleGauge = (function (global)
             o = this.opts;
 
         // Create SVG
-        this.svg = createSVGElem('svg', {'xmlns': 'http://www.w3.org/2000/svg', 'width': sw, 'height': sh});
+        this.svg = createSVGElem('svg', {'xmlns': 'http://www.w3.org/2000/svg', 'viewBox' : '0 0 100 50' });
 
         // Create bg
-        this.bg = createSVGElem('rect', {'fill': o.bgColor, 'width': '100%', 'height': '100%'});
-        this.svg.appendChild(this.bg);
+       // this.bg = createSVGElem('rect', {'fill': o.bgColor, 'width': '100%', 'height': '100%'});
+        //this.svg.appendChild(this.bg);
 
         // Create empty line
         this.epath = createSVGElem('path', {
@@ -136,8 +136,8 @@ var HalfCircleGauge = (function (global)
         // Create text
         this._text = createSVGElem('text', {
             'fill': o.textColor,
-            'x': sw / 2,
-            'y': sh,
+            'x': 50,
+            'y': 50,
             'text-anchor': 'middle',
             'font-size': o.textSize
         }); 
@@ -211,15 +211,15 @@ var HalfCircleGauge = (function (global)
      * @param {String} c 설정할 배경 색상
      * @return {String} 현재 설정된 배경 색상
      */
-    HalfCircleGauge.prototype.bgColor = function (c)
+    /*HalfCircleGauge.prototype.bgColor = function (c)
     {
         if(typeof c !== "undefined")
         {
             this.opts.bgColor = c;
             __attrs(this.bg, {'fill': c});
         }
         return this.opts.bgColor;
-    }
+    }*/
 
     /**
      * @public
@@ -369,7 +369,8 @@ var HalfCircleGauge = (function (global)
     HalfCircleGauge.prototype._geth = function ()
     {
         var o = this.opts;
-        return (o.radius + (o.lineWidth > o.emptyLineWidth ? o.lineWidth : o.emptyLineWidth) / 2);
+        return 50;
+        //return (50+ (o.lineWidth > o.emptyLineWidth ? o.lineWidth : o.emptyLineWidth) / 2);
     }
 
     /**
@@ -380,7 +381,7 @@ var HalfCircleGauge = (function (global)
     HalfCircleGauge.prototype._getoffx = function ()
     {
         var o = this.opts;
-        return ((o.lineWidth > o.emptyLineWidth ? o.lineWidth : o.emptyLineWidth)) / 2;    
+        return 50 - o.radius ;//- ((o.lineWidth > o.emptyLineWidth ? o.lineWidth : o.emptyLineWidth)) / 2;    
     }
 
     /**
@@ -393,8 +394,8 @@ var HalfCircleGauge = (function (global)
         var sw = this._getw(),
             sh = this._geth(),
             o = this.opts;
-        __attrs(this.svg, {'width': sw, 'height': sh});
-        __attrs(this._text, {'x' : sw / 2, 'y': sh});
+       // __attrs(this.svg, {'width': sw, 'height': sh});
+        //__attrs(this._text, {'x' : sw / 2, 'y': sh});
         this.epath.setAttribute('d', arcPath(100, o.radius, this._getoffx(), sh));
         this.path.setAttribute('d', arcPath(o.value, o.radius, this._getoffx(), sh));
     }

diff --git a/HalfCircleGauge/index.html b/HalfCircleGauge/index.html
@@ -15,7 +15,7 @@
             width: 100px;
         }
         #test {
-            padding:4px; margin: 0 auto; width: 200px; height: 250px;
+            padding:4px; margin: 0 auto; width: 200px; height: 250px; border-style: solid; border-width: 1px 1px 1px 1px; border-color: black;
         }
     </style>
 </head>
@@ -29,7 +29,7 @@
         </div>
         <div>
             <div class="attrName"> radius: </div>
-            <input type="range" id = "radius" name="radius" min = "40" max ="100" value="50">
+            <input type="range" id = "radius" name="radius" min = "0" max ="25" value="50">
             <a id="radiusA"></a>
         </div>
         <div>
@@ -77,14 +77,14 @@
     var circularBar = new HalfCircleGauge({
         lineWidth : 40,
         percentage: 30,
-        radius : 50,
-        lineColor: '#5ca284',
-        bgColor : '#ffffff',
+        radius : 25,
+        lineColor: '#fee870',
         showText: true,
-        lineWidth: 25,
-        emptyLineWidth: 25,
-        emptyLineColor: '#afdcc9',
-        textColor : '#07472C'
+        lineWidth: 5,
+        emptyLineWidth: 2,
+        emptyLineColor: '#eaeaea',
+        textColor : '#878787',
+        textSize : 12
     }).create(target);
     console.log(circularBar);
     circularBar.text("" + Math.round(circularBar.val()) + "%");
@@ -160,12 +160,12 @@
     })
 
     // bgColor
-    var bgColor = document.getElementById('bgColor');
+    /*var bgColor = document.getElementById('bgColor');
     bgColor.value= circularBar.bgColor();
 
     bgColor.addEventListener("change", function () {
         circularBar.bgColor(bgColor.value);
-    });
+    });*/
 
     //text Color
     var textColor = document.getElementById('textColor');