Question

作为一名前端开发人员，我获得了一个模拟设计来实现。这个设计有几个行车记录仪式的图标，让我难以理解在HTML和CSS中标记它们的最佳方式。

图像如下所示：

enter image description here

显然，这些资产分别代表空状态和满状态。

我的问题是：如何标记这些图像，以便显示不同的完成程度，即10％已满，60％已满等？

期待听到你的回答。

Answer 1

我会认真推荐查看Raphael javascript库。你可以用几行代码敲出这样的东西。

另见这个问题：Drawing a half gauge/speedometer (JavaScript Canvas or Java Swing Example needed)我给出了一个答案，包括使用Raphael的四行代码示例，它提供了一个动画燃油表。你需要为你的设计调整它，但即使这样，它也只是几行代码。

使用Raphael绘制这样的东西的好处在于它与旧版浏览器完全兼容，甚至IE（如果你需要的话可以追溯到IE6），而无需你做任何特殊的代码来支持它。这是一个很棒的小图书馆。

希望有所帮助。

Answer 2

鉴于图像重现实际数据并且不仅仅是一种设计机制，我将图像标记为HTML图像。

<img ... alt="10%">

如果您关注的是显示图像的某些部分，您可以采用的一种方法是将图像设置为某个容器的背景，并使用宽度和高度来标识要显示的图像数量。

Answer 3

我不是html5 / css3的专家，但你不会使用html5 arc命令创建一个掩码来显示完整的状态。

当你从空到满旋转270度时，你只需将值映射为270的百分比，以创建掩盖适当值的弧的值。

我相信有一个可能有用的java脚本Math.PI。