以編程方式創建撥號圖像的最佳方法？

Question

我正在使用大量不同大小和樣式的錶盤的網站上工作。這些被用作進度指示器，所以錶盤越填滿，該項目越接近100％完成。

我在尋找一種跨瀏覽器的抽象解決方案，因此我可以在不同風格的撥號盤上使用相同的解決方案。我會使用谷歌的圖表API，但不幸的是它的撥號不提供所需的定製程度。舉個例子，這裏有圖像了一把：

的功能是一樣的，但是你可以看到他們是不同的尺寸。

我曾嘗試使用RaphaëlJavaScript庫的解決方案，但無法找到掩蓋完整圖像以顯示0到100％分段的方法。默認圖像是灰色的，完整圖像是您在上面看到的綠色圖像。我需要顯示0到100之間的值。

任何幫助或指導將不勝感激。

Answer 1

雖然SVG支持，但是Raphaël不做非矩形裁剪AFAIK。

clip-path animation可能會爲您想要做的事提供一些幫助。