Issue with the stroke showing in rgb not HEX

[phara0hcom]

I have an issue that the stroke in showing in RGB not HEX so it doesn't show in IE How do I get it in HEX? all the variables are in HEX

my code:

var element = document.getElementById('timeC');
var circle = new ProgressBar.Circle(element, {
    trailColor: '#D8D8D8',
    trailWidth: 10,
    strokeWidth: 10,

    // Set default step function for all animate calls
    step: function(state, circle) {
        circle.path.setAttribute('stroke', state.color);
    }
});

to start the circle:

circle.set(0);
circle.animate(0.5, {
    from: {color: '#00FF00'},
    to: {color: '#FFAE00'},
    duration: 7500
}, function(){
    circle.animate(0.99, {
        from: {color: '#FFAE00'},
        to: {color: '#FF0004'},
        duration: 10000
    });
});

[kimmobrunfeldt]

The conversion from hex to rgb color is done by shifty, tweening library: https://github.com/jeremyckahn/shifty

Are you sure it is IE problem? Which version?

[phara0hcom]

IE 11 on win7

[phara0hcom]

but how do I stop it from converting?

[kimmobrunfeldt]

I don't think that is your real problem. IE should support rgb color definition just as it supports hex. I just tested this with a jsfiddle using IE and it draws the SVG correctly. http://jsfiddle.net/b6fp1sy7/

[kimmobrunfeldt]

That is probably related to CSS layouting. Try to:

#container > svg {
  display: block;
  width: 100%;
}

[phara0hcom]

I can see it because I can see the trail that is colored in HEX but not the stroke...

[kimmobrunfeldt]

I could not confirm this behavior.