What is good CSS / HTML / SVG / Javascript to do a loop image for score 0 to 10? (need to work on IE 7 and other common browsers)

To do an image like this:

It has to support a score from 0.0 to 10.0, and the solid color is painted accordingly -- for 1.0, it is 36 degree, for 9.0, it is 360 x 0.9 = 324 degree.

Is there a good way to do it just using HTML / CSS / SVG / Javascript? The requirement is that it needs to work on IE 7 and up, FF, Chrome, and Safari. (Update: Or, do it for IE 8 and up, and for IE 7, just fall back to a solid color loop)

I was thinking of using a solid loop (1 image), plus 20 images with alpha transparencies to cov开发者_如何学JAVAer up the solid loop, so that a granularity of 0.5 (such as 4.0, 4.5, 5.0) are all covered, but the downside is that there are 21 images total (can put into a sprite, but still quite large).

This paragraph:

I was thinking of using a solid loop (1 image), plus 20 images with alpha transparencies to cover up the solid loop, so that a granularity of 0.5 (such as 4.0, 4.5, 5.0) are all covered, but the downside is that there are 21 images total (can put into a sprite, but still quite large).

sounds like a lot of work :)

Instead, I might be tempted to use Raphaël for this.

Raphaël currently supports Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+.

Here's a demo that looks vaguely like your image, and has animated concentric circles:

http://raphaeljs.com/polar-clock.html

Are you familiar with RaphaelJS JS library? Take a look at their examples, they're pretty impressive.

Scalable Vector Graphics and Vector Markup Language