javascript - Scale SVG image to fit parent and change gauge colour at different instances -

i trying following using raphael:

1) scale svg fit parent div (in case #bg)

2) change colour of gauge @ different instances... i've done far doesn't work:

archtype.customattributes.counter = function (counter, top) {   var motto = '';   switch(true) {     case(counter<=(top/10)):       motto = 'very poor !'       colour = '#bd2727'; //pretty sure wrong       break;     case(counter<=(5.61*top/10)):       motto = 'poor'       colour = '#f79a38'; //pretty sure wrong       break;     case(counter<=(7.21*top/10)):       motto = 'fair'       colour = '#fbde07'; //pretty sure wrong       break;         case(counter<=(8.81*top/10)):       motto = 'good'       colour = '#90c342'; //pretty sure wrong       break;     case(counter<=(9.61*top/10)):       motto = 'excellent'       colour = '#1f9c4c'; //pretty sure wrong       break;          }   return {     counter: [counter,top],     text: math.floor(counter) + '\n' + motto   } } 

fiddle here: http://jsfiddle.net/mwvlc0kb/4/

i hope answser comes not late :

1) fitting container may tricky on ie, easier on chr/ff : have following (see my responsive gauge lib) :

• add viewbox="0 0 w h" preserveaspectratio="xminymin meet" svg node. no need w , h pixel size, set ratio : square, w=h=1,
• add height=100% , max-width=100% svg node css,
• of course, set either height or width svg parent div,
• for ie, add canvas along svg node, otherwise not size svg properly.

note resizing gauge during window resize more tricky on ie...

2) had set color on arc's attributes, not counter's ones, see this fiddle.

archtype.customattributes.arc = function(xloc, yloc, value, total, r, counter, top) {   var alpha = 360 / total * value,   = (90 - alpha) * math.pi / 180,   x = xloc + r * math.cos(a),   y = yloc - r * math.sin(a),   path;    if (total == value) {     path = [       ["m", xloc, yloc - r],       ["a", r, r, 0, 1, 1, xloc - 0.01, yloc - r]     ];   } else {     path = [       ["m", xloc, yloc - r],       ["a", r, r, 0, +(alpha > 180), 1, x, y]     ];   }    if (counter && top) {     var colour;     switch (true) {       case (counter <= (top / 10)):         colour = '#bd2727'; //pretty sure wrong         break;       case (counter <= (5.61 * top / 10)):         colour = '#f79a38'; //pretty sure wrong         break;       case (counter <= (7.21 * top / 10)):         colour = '#fbde07'; //pretty sure wrong         break;       case (counter <= (8.81 * top / 10)):         colour = '#90c342'; //pretty sure wrong         break;       case (counter <= (9.61 * top / 10)):         colour = '#1f9c4c'; //pretty sure wrong         break;     }   }    var result = {     path: path   };   if (colour){     result.stroke = colour;   }    return result; };