javascript - 以编程方式创建表盘图像的最佳方式？

Question

我正在开发一个使用许多不同大小和样式的表盘的网站。这些用作进度指示器，因此表盘填得越多，该元素就越接近 100% 完成。

我正在寻找一种跨浏览器的抽象解决方案，这样我就可以在不同样式的表盘上使用相同的解决方案。我会使用 Google 的 Charts API，但不幸的是它的表盘不提供所需的定制程度。例如，这里有一些图片:

功能相同，但如您所见，它们的维度不同。

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

如有任何帮助或指导，我们将不胜感激。

Answer 1

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

这clip-path animation可能会为您想做的事情提供一些帮助。