7 Segment LED display

by LatencyMachine

HTML

<p>This 7-segment LED display is done with simple SVG polygons and CSS.  It will scale nicely by altering the width/height/viewBox in the svg element. Toggle the on/off styling by clicking the segment.</p>

<div id="digitPane">
    <svg xmlns="http://www.w3.org/2000/svg" width="150px" height="200px" viewBox="0 -1 12 20">
        <g class="digit">
          <polygon id="a" class="off" points=" 1, 1  2, 0  8, 0  9, 1  8, 2  2, 2"/>
          <polygon id="b" class="off" points=" 9, 1 10, 2 10, 8  9, 9  8, 8  8, 2"/>
          <polygon id="c" class="off" points=" 9, 9 10,10 10,16  9,17  8,16  8,10"/>
          <polygon id="d" class="off" points=" 9,17  8,18  2,18  1,17  2,16  8,16"/>
          <polygon id="e" class="off" points=" 1,17  0,16  0,10  1, 9  2,10  2,16"/>
          <polygon id="f" class="off" points=" 1, 9  0, 8  0, 2  1, 1  2, 2  2, 8"/>
          <polygon id="g" class="off" points=" 1, 9  2, 8  8, 8  9, 9  8,10  2,10"/>
        </g>
    </svg>
</div>

<br>
<br>
<ul>
    TODO
    <li>More attention to detail in the segments vs. a real LED display.</li>
    <li>Would like more spacing between the segments.</li>
    <li>Decimal point.</li>
</ul>

CSS

#digitPane
{
background-color : black;
}

.off
{
    fill: #320000;
}

.on
{
    fill: red;
}

JavaScript

$(document).ready(function() {
    $(".digit polygon").click(function() {
        // jQuery *Class functions do not work with SVG.
        // http://docs.jquery.com/Won't_Fix#SVG.2FXML.2FVML_Bugs
        $(this).toggleClass("on"); // WTF isn't this working        
        
        var sSegClass = $(this).attr("class") === "off" ? "on" : "off";            
        $(this).attr("class", sSegClass);
    });
        
});