Support setting color in legacy browsers

[cephirothdy2j]

Some older browsers (IE11) do not support setting CSS styles on inline SVG elements. This PR mitigates that by setting the "stroke" attribute on the value path to be the new color. I'm doing it within a timeout halfway through the animation duration so that the color change happens "in progress" as the dial animates.

[naikus]

Hi @cephirothdy2j, thanks for pointing this out. Can you open an issue for this? Also if you'd create a demo on codepen or jsfiddle that can be a test, it'd be great!

[cephirothdy2j]

Issue created. This PR resolves https://github.com/naikus/svg-gauge/issues/14.

Here is a CodePen demonstrating the fix. It's a near-clone of your demo, with these changes:

• Using my fork of the module instead of yours
• Removing the stroke CSS properties from .gauge-container > .gauge > .value and .gauge-container.two > .gauge > .value

The second is because any stroke property set in CSS will override a stroke attribute on the <path /> element.

If you view your demo in IE11, you'll see that the color of the gauge never changes from the orange value set in CSS. In my demo, the color changes halfway through the gauge animation. The color itself does not animate.

Here is a GIF also demonstrating the difference. This uses my fork. Chrome is on the left, IE11 is on the right.