以编程方式创建表盘图像的最佳方法？
我正在开发一个使用许多不同尺寸和样式的表盘的网站。这些被用作进度指示器，因此表盘填得越多，该项目就越接近 100% 完成。
我正在寻找一种跨浏览器的抽象解决方案，这样我就可以在不同风格的表盘上使用相同的解决方案。我会使用 Google 的 Charts API，但不幸的是它的表盘无法提供所需的定制程度。例如，以下是一些图像：
功能是相同的，但如您所见，它们的尺寸不同。
我确实尝试了使用 Raphaël JavaScript 库的解决方案，但找不到一种方法来屏蔽整个图像以显示从 0 到 100% 的片段。默认图像是灰色的，完整的图像是您在上面看到的绿色图像。我需要显示 0 到 100 之间的值。
任何帮助或指导将不胜感激。
I'm working on a website that uses a lot of different sized and styled dials. These are used as progress indicators, so the more filled a dial is, the closer to 100% complete that item is.
I'm looking for a cross-browser, abstract solution so I can use the same solution across the different-styled dials. I'd use Google's Charts API, but unfortunately its dials don't offer the degree of customization needed. For an example, here are a handful of the images:
The functionality will be the same, but as you can see they're different dimensions.
I did try a solution with the Raphaël JavaScript library, but couldn't find a way to mask the complete image to show segments from 0 to 100%. The default image is grey, the complete image is the green ones you see above. I need to show values between 0 and 100.
Any help or guidance would be greatly appreciated.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
据我所知，Raphaël 不进行非矩形裁剪，尽管 SVG 支持非矩形裁剪。
这个剪辑路径动画可能会提供一些帮助你做你想做的事。
Raphaël doesn't do non-rectangular clipping AFAIK, even though SVG supports that.
This clip-path animation might provide a bit of help for what you want to do.