search

naikus / svg-gauge

Minimalistic, animated SVG gauge. Zero dependencies
MIT License
319 stars 74 forks source link

Support setting color in legacy browsers #12

Closed cephirothdy2j closed 2 years ago

cephirothdy2j commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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:

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.

gauge-difference