angularjs – 改变值时动画SVG路径

我正在尝试使用SVG和角度指令创建一个图来改变动态部分。现在我已经做到了：

http://plnkr.co/edit/TcbK7kyzM3tapDISxndh?p=preview

app.directive('pieChart',function($document) {
    return {
        reStrict: "E",template: '<svg width="500" height="500">' +
          '<path d="M100,200 a150,150 0 1,0 150,-150" stroke="black" stroke-width="10" fill="none"></path>' +
        '</svg>',scope: {
          value: '='
        },link: function(scope,elem,attr) {
        }
    }
});

我希望我的图形看起来像这样，当它是100％的价值，当价值是 – 我们说 – 45％，我想看到这一行，但只有45％的长度从顶部的中心。我可能需要重新计算路径的路径值，但是我想问的是，当我改变JS的路径以使其在改变大小的时候可以动画化吗？

谢谢你提前，或者如果有人知道这个东西的一个很好的教程，请链接到我。

编辑：我改变了一个简单的条形图，但这只是举个例子，我知道这可以做到没有SVG，因为你可以使它使用div，但我希望图表更复杂。

这是一个jsfiddle http://jsfiddle.net/fg9e7eo4/1/

在我的例子中，图表保持动画，我想使其动画只有一次，而不是保持在这一点。

顺便说一下，这是我试图让它工作的指令：

testApp.directive('pieChart',function() {
  var html = 
    '<svg width="510" height="20" style="BACkground: #fff">' +
      '<path d="{{path}}" stroke="red" stroke-width="10" fill="none">' +
        '<animate dur="1s" repeatCount="indefinite" attributename="d" values="{{path2}}"/>' +
      '</path>' +
    '</svg>';

  return {
    reStrict: 'E',template: html,scope: {
      'value': '='
    },attrs) {

      scope.$watch('value',function(newValue,oldvalue) {
        scope.path = 'M 5 10,L ' + (newValue * 5) + ' 10';
        scope.path2 = 'M 5 10,L ' + (oldValue * 5) + ' 10; M 5 10,L ' + (newValue * 5) + ' 10';
        elem.children().children().beginElement();
      });

    }
  };
});

<rect x="10" y="10" height="110" width="500"
     style="stroke:#ff0000; fill: #0000ff">
    <animate
        attributename="width"
        begin="0s"
        dur="2s"
        from="0"
        to="500"
    />
</rect>