Maßstab SVG-Bild zu passen Eltern und Änderung Spur Farbe an den verschiedenen Instanzen

Question

Ich versuche, das folgende mit Raphael zu tun:

1) ein SVG-Maßstab einen Elternteil div zu passen (in diesem Fall #bg)

2) ändern sie die Farbe des Sensors bei verschiedenen Instanzen ... das ist, was ich bisher gemacht habe, aber es funktioniert nicht:

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

Answer 1

Ich hoffe, meine answser nicht zu spät kommt:

1) an dem Behälter passend auf IE schwierig sein kann, aber es ist einfacher, auf Chr/FF: Sie werden die folgenden (siehe my responsive gauge lib) zu tun haben:

• füge viewBox = "0 0 wh" preserveAspectRatio = "xMinYMin meet" dem Svg-Knoten hinzu. Keine Notwendigkeit für w und h, um die Pixelgröße zu sein, sie setzen nur das Verhältnis: für ein Quadrat, w = h = 1,
• addiere Höhe = 100% und max-width = 100% zum Svg-Knoten CSS,
• natürlich, setzen Sie entweder eine Höhe oder eine Breite auf die Svg Eltern div,
• für IE, fügen Sie eine Leinwand zusammen mit dem Svg-Knoten, sonst wird es nicht die Größe der Svg richtig.

Beachten Sie, dass das Messgerät während eines Fensters Resize Ändern der Größe ist noch heikel auf IE ...

2) Sie auf dem Bogen die Attribute, die Farbe zu setzen hatte, nicht diejenigen, die Zähler, siehe 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; 
};