缩放 SVG 图像以适合父级并在不同实例中更改仪表颜色

Question

我正在尝试使用 Raphael 执行以下操作：

1) 缩放 SVG 以适合父级 div（在本例中 #bg）

2) 在不同的情况下更改仪表的颜色...这是我目前所做的，但它不起作用：

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 这里：http://jsfiddle.net/mwvLc0kb/4/

Answer 1

希望我的回答来得还不算太晚：

1) 在 IE 上适应容器可能很棘手，但在 Chr/FF 上更容易：您必须执行以下操作（参见 my responsive gauge lib）：

将 viewBox="0 0 w h" preserveAspectRatio="xMinYMin meet" 添加到 svg 节点。不需要 w 和 h 是像素大小，它们只设置比率：对于正方形，w=h=1,
将 height=100% 和 max-width=100% 添加到 svg 节点 CSS,
当然，为 svg 父级设置高度或宽度 div，
对于 IE，添加 canvas 和 svg 节点，否则它不会正确调整 svg 的大小。

请注意，在 window 调整大小时调整仪表大小在 IE 上更加棘手...

2) 您必须在弧的属性上设置颜色，而不是计数器的属性，请参阅 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;
};

缩放 SVG 图像以适合父级并在不同实例中更改仪表颜色

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

javascript

svg

raphael