Star Rating - SVG

An attempt to create a star rating system with SVG

HTML

<script src="http://dl.dropbox.com/u/1621719/development/JSFiddle/js/rating.js"></script>
    <div class="star-container">
      <h1>Rate the stars</h1>
      <h5>On a scale of 1 to 5 (5 being the best) how do they look to you?</h5>
      <div class="stars"> 
        <a class="one" title="1/5" href="#"></a>
        <a class="two" title="2/5" href="#"></a>
        <a class="three" title="3/5" href="#"></a>
        <a class="four" title="4/5" href="#"></a>
        <a class="five" title="5/5" href="#"></a>
        <div class="number"></div>
      </div>
    </div>

    <div class="status">
      <div>
        <span>Last Modified:&nbsp;</span>02/09/2012
      </div>
      <div>
        <span>Design:&nbsp;</span>
        <a href="http://gplus.to/allusis" target="_blank">+Anthony Montemorano</a>
      </div>
      <div>
        <span>Development:&nbsp;</span>
        <a href="https://gplus.to/TerrordactylDesigns" target="_blank">+Mike Belardo</a>
      </div>
    </div>

CSS

@media screen {
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url('http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff') format('woff');
}
}
@media screen {
@font-face {
  font-family: 'Open Sans Condensed';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Cond Light'), local('OpenSans-CondensedLight'), url('http://themes.googleusercontent.com/static/fonts/opensanscondensed/v6/gk5FxslNkTTHtojXrkp-xF1YPouZEKgzpqZW9wN-3Ek.woff') format('woff');
}
}
html,body {margin:0;padding:0}
.clear {clear:both}
h1 {
  margin:0;
  padding:0;
  font-family: 'Open Sans Condensed', sans-serif;
  font-size:1.8em;
  font-weight:normal;
}
h5 {
  margin:0 0 10px 0;
  padding:0;
  font-family: 'Open Sans', sans-serif;
  font-size:0.9em;
  color:#999;
  font-weight:normal;
  font-style:italic;
}
.stars {overflow:auto}
.star-container {
  padding:1.5em;
  padding-left:1em;
  margin-top:2px;
  display:block;
  
  box-shadow:0 0 20px rgba(150,150,150,0.2);
}
.star-container a {
  display:block;
  width:50px; 
  height:50px;
  float:left; 
  background:url('http://dl.dropbox.com/u/1621719/development/JSFiddle/images/ui/star.svg');
  background-repeat:no-repeat; 
}

.star-container a.str-off {
  background:url('http://dl.dropbox.com/u/1621719/development/JSFiddle/images/ui/star.svg');
}
.star-container a.str-on{
  background:url('http://dl.dropbox.com/u/1621719/development/JSFiddle/images/ui/star-on.svg')
}
.star-container a.str-hover{
  background:url('http://dl.dropbox.com/u/1621719/development/JSFiddle/images/ui/star-hover.svg')
}

.number {
  float:left;
  margin:0.1em 0 0 1em;
  font-family: 'Open Sans Condensed', sans-serif;
  font-size:2.1em;
  color:rgba(100,100,100,0.6);
}
.status {
  width:100%;
  position:absolute;
  bottom:0;
  background:#ddd;
  height:25px;
  line-height:25px;
}
.status div {padding:0...

JavaScript

// Javascript by Mike Belardo. 
// See rating.js for info