Что такое хороший CSS / HTML / SVG / Javascript для создания изображения цикла для оценки от 0 до 10? (нужно работать на IE 7 и других распространенных браузерах)

Question

Чтобы сделать изображение как это:

Он должен поддерживать оценку от 0,0 до 10,0, и сплошной цвет раскрашивается соответственно - для 1,0 это 36 градусов, для 9,0 это 360 x 0,9 = 324 градуса.

Есть ли хороший способ сделать это, просто используя HTML / CSS / SVG / Javascript? Требуется, чтобы он работал на IE 7 и выше, FF, Chrome и Safari. (Обновление: или, сделайте это для IE 8 и выше, а для IE 7 просто вернитесь к однотонной петле)

---

Я думал об использовании сплошной петли (1 изображение), а также 20 изображений с альфа-прозрачностью, чтобы покрыть сплошную петлю, чтобы покрыть все детали зернистости 0,5 (например, 4,0, 4,5, 5,0), но Недостатком является то, что всего 21 изображение (можно поместить в спрайт, но все еще довольно большое).

Answer 1

Вы знакомы с RaphaelJS JS библиотекой?Посмотрите на их примеры, они впечатляют.

Answer 2

Этот абзац:

Я думал об использовании сплошной петли (1 изображение), плюс 20 изображений с альфа прозрачные пленки, чтобы покрыть твердое тело петля, так что зернистость 0,5 (например, 4.0, 4.5, 5.0) все покрыты, но недостатком является то, что всего 21 изображений в спрайт, но все еще довольно большой).

звучит как много работы:)

Вместо этого у меня может возникнуть желание использовать Raphaël для этого.

Raphaël в настоящее время поддерживает Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ и Internet Explorer 6.0+.

Вот демонстрация, которая выглядит неопределенно как ваше изображение, и имеет анимированные концентрические круги:

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

Answer 3

Масштабируемая векторная графика и Язык векторной разметки