как перевести путь svg

У меня есть svg спидометра. Я хочу создать анимацию. Есть игла, сделанная из дорожки. Я сгруппировал этот путь, чтобы я мог переводить или преобразовывать. Это метр/стрелка, которая должна двигаться в соответствии с заданным пользователем значением. Если пользователь указывает значение от 0 до 25, игла должна быть в первом срезе и так далее. Но я понятия не имею, как двигать стрелку, состоящую из пути.

Я создал jsbin этого

http://jsbin.com/danefehiro/1/edit?html,js,output

Вот код

<input type="text" id="speedValue" />
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 344.996 344.996" xml:space="preserve">
<g>
    <path fill="rgb(132, 219, 255)" d="M7.5,243.337h52.227c0-31.141,12.622-59.334,33.03-79.741l-36.93-36.93
        C25.968,156.525,7.5,197.774,7.5,243.337z"/>
    <path fill="rgb(84, 192, 235)" d="M55.827,126.666l36.93,36.93c20.408-20.408,48.6-33.03,79.741-33.03V78.339
        C126.935,78.339,85.685,96.807,55.827,126.666z"/>
    <circle style="fill:#51B3DA;" cx="172.498" cy="243.337" r="23.32"/>
    <path fill="rgb(255, 209, 92)" d="M337.496,243.337h-52.227c0-31.141-12.622-59.334-33.03-79.741l36.93-36.93
        C319.028,156.525,337.496,197.774,337.496,243.337z"/>
    <path fill="rgb(255, 112, 88)" d="M289.169,126.666l-36.93,36.93c-20.408-20.408-48.6-33.03-79.741-33.03V78.339
        C218.061,78.339,259.311,96.807,289.169,126.666z"/>
    <g id="meter">
        <path fill="#40596B" id="needle" d="M175.884,220.29c10.162,1.482,18.179,9.5,19.661,19.662l44.785-64.447L175.884,220.29z"/>
    </g>
</g>
</svg>


  var speedValue = document.querySelector('#speedValue');
  var needle = document.querySelector('#needle');
  var meter = document.querySelector('#needle');
  speedValue.addEventListener("click", function(event){
    var value = event.target.value;
    // if value is in between 1 - 25, the needle
    // should be on first block, if 25 - 50, then
    // the needle should be on second slice and if
    // 50  - 75, then on 3rd slice and if 75 - 100
    // then on last slice
    if (value >= 0 && value <= 25) {
      meter.setAttribute("transform", "rotate(45)");
    } else if(value > 25 && value <= 50) {
      meter.setAttribute("transform", "rotate(90)"); 
    } else {
      meter.setAttribute("transform", "rotate(180)"); 
    }
  });