如何在HTML / CSS中标记速度表/仪表？

Question

As a front-end developer, I've been given a mock-up design to implement. This design features several tachograph-style icons, which have me stumped as to the best way to mark them up in HTML and CSS.

The images look like the following:

Obviously these assets represent the empty state and the full state respectively.

My issue is this: how can I mark-up these images so that I can show varying levels of completion, ie 10% full, 60% full etc?

Waiting in anticipation to hear your answers.

Answer 1

I would seriously recommend looking into the Raphael javascript library. You can knock something like this up in just a few lines of code.

See also this question: Drawing a half gauge/speedometer (JavaScript Canvas or Java Swing Example needed) where I gave an answer including a four-line code sample using Raphael, which provides an animated fuel gauge. You'll need to tweak it for your design, but even then it's only going to be a few lines of code.

The great thing about using Raphael to draw things like this is that it is fully compatible with older browsers, even IE (as far back as IE6 if you need it), without you having to do any special code to support it. It's a great little library.

Hope that helps.

Answer 2

Given that the image reprisents actual data and isn't purely a design mechanism, I'd mark the image up as an HTML image.

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

If your concern is about showing portions of the image, one way you could do this would be to set the image as a background to some container and use width and height to identify the amount of the image to show.

Answer 3

i'm not an expert on html5 /css3, but would you not use the html5 arc command to create a mask to reveal the full state.

As you have a 270 degree rotation from empty to full, you'd just map the value as percentage of 270 to create the value of the arc that would mask the appropriate value.

I believe that there is a java script Math.PI that might help to.