缩放SVG图像以适合父对象并在不同情况下更改量规颜色

Question

I am trying to do the following using Raphael:

1) Scale an SVG to fit a parent div (in this case #bg )

2) Change the colour of the gauge at different instances... this is what I've done so far but it doesn't work:

archtype.customAttributes.counter = function (counter, top) {
  var motto = '';
  switch(true) {
    case(counter<=(top/10)):
      motto = 'Very Poor !'
      colour = '#BD2727'; //pretty sure this is wrong
      break;
    case(counter<=(5.61*top/10)):
      motto = 'Poor'
      colour = '#F79A38'; //pretty sure this is wrong
      break;
    case(counter<=(7.21*top/10)):
      motto = 'Fair'
      colour = '#FBDE07'; //pretty sure this is wrong
      break;    
    case(counter<=(8.81*top/10)):
      motto = 'Good'
      colour = '#90C342'; //pretty sure this is wrong
      break;
    case(counter<=(9.61*top/10)):
      motto = 'Excellent'
      colour = '#1F9C4C'; //pretty sure this is wrong
      break;       
  }
  return {
    counter: [counter,top],
    text: Math.floor(counter) + '\n' + motto
  }
}

Fiddle here: http://jsfiddle.net/mwvLc0kb/4/

Answer 1

I hope my answser comes not too late :

1) fitting to the container may be tricky on IE, but is easier on Chr/FF : you will have to do the following (see my responsive gauge lib ) :

• add viewBox="0 0 wh" preserveAspectRatio="xMinYMin meet" to the svg node. No need for w and h to be the pixel size, they only set the ratio : for a square, w=h=1,
• add height=100% and max-width=100% to the svg node CSS,
• of course, set either a height or a width to the svg parent div,
• for IE, add a canvas along with the svg node, otherwise it will not size the svg properly.

Note that resizing the gauge during a window resize is even more tricky on IE...

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

archtype.customAttributes.arc = function(xloc, yloc, value, total, R, counter, top) {
  var alpha = 360 / total * value,
  a = (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 this is wrong
        break;
      case (counter <= (5.61 * top / 10)):
        colour = '#F79A38'; //pretty sure this is wrong
        break;
      case (counter <= (7.21 * top / 10)):
        colour = '#FBDE07'; //pretty sure this is wrong
        break;
      case (counter <= (8.81 * top / 10)):
        colour = '#90C342'; //pretty sure this is wrong
        break;
      case (counter <= (9.61 * top / 10)):
        colour = '#1F9C4C'; //pretty sure this is wrong
        break;
    }
  }

  var result = {
    path: path
  };
  if (colour){
    result.stroke = colour;
  }

  return result;
};