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

Question

我正在开发一个使用大量不同尺寸和样式的表盘的网站。这些用作进度指示器，因此表盘填充越多，该项目的完成率就越接近100％。

我正在寻找一种跨浏览器的抽象解决方案，因此我可以在不同风格的拨号盘上使用相同的解决方案。我使用谷歌的图表API，但不幸的是它的拨号不提供所需的定制程度。举个例子，这里有一些图像：

功能将相同，但正如您所见，它们的尺寸不同。

我确实尝试过使用RaphaëlJavaScript库的解决方案，但无法找到掩盖整个图像的方法来显示0到100％的段。默认图像为灰色，完整图像是您在上面看到的绿色图像。我需要显示0到100之间的值。

非常感谢任何帮助或指导。

Answer 1

Raphaël不进行非矩形剪辑AFAIK，即使SVG支持它。

此clip-path animation可能会为您的目标提供一些帮助。