什么是好的 CSS / HTML / SVG / Javascript 来制作 0 到 10 分的循环图像？ （需要在IE 7等常见浏览器上运行）
要制作这样的图像：
它必须支持从 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 个图像用alpha透明度来遮盖实心循环，这样0.5的粒度（比如4.0、4.5、5.0）都被遮盖了，但缺点是总共有21张图片（可以放入精灵中，但还是很大） ）。
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 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).
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
这一段：
听起来工作量很大:)
相反，我可能会想使用 Raphaël 来实现此目的。
这是一个看起来有点像您的图像的演示，并且有动画同心圆：
http://raphaeljs.com/polar -clock.html
This paragraph:
sounds like a lot of work :)
Instead, I might be tempted to use Raphaël for this.
Here's a demo that looks vaguely like your image, and has animated concentric circles:
http://raphaeljs.com/polar-clock.html
您熟悉 RaphaelJS JS 库吗？看看他们的例子，它们令人印象深刻。
Are you familiar with RaphaelJS JS library? Take a look at their examples, they're pretty impressive.
可缩放矢量图形和矢量标记语言
Scalable Vector Graphics and Vector Markup Language