Javascript 以编程方式创建拨号映像的最佳方法？

我在一个网站上工作，它使用很多不同大小和样式的拨号盘。它们被用作进度指示器，因此刻度盘上的刻度越满，该项目就越接近100%完成

我正在寻找一个跨浏览器的，抽象的解决方案，这样我就可以使用不同风格的拨号相同的解决方案。我会使用谷歌的图表API，但不幸的是，它的刻度盘没有提供所需的定制程度。例如，以下是一些图片：

功能将是相同的，但正如您所看到的，它们是不同的维度

我确实尝试了Raphaël JavaScript库的解决方案，但找不到一种方法来屏蔽整个图像，以显示从0%到100%的片段。默认图像为灰色，完整图像为您在上面看到的绿色图像。我需要显示0到100之间的值

---

任何帮助或指导都将不胜感激。

Raphaël不支持非矩形剪裁，即使SVG支持

---

这可能会为您想要做的事情提供一些帮助。

Raphaël不会自动执行非矩形剪裁，尽管SVG支持这一点

---

这可能会对您想要做的事情提供一些帮助。

是的，非矩形剪辑是我在尝试使用它时遇到的问题。SVG有什么浏览器支持？@MartinBean简言之：Opera 8+、FF 3.0+、Safari和Chrome自2006年以来，现在IE9都有本机支持。是的，非矩形剪辑是我尝试使用它时遇到的问题。SVG有什么浏览器支持？@MartinBean简言之：Opera 8+、FF 3.0+、Safari和Chrome自2006年以来，现在IE9都有本机支持。