更改值时动画SVG路径

Question

我正在尝试使用SVG和angular指令创建一个图形来更改动态部分.现在我已经这样做了:

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': '='
    },

    link: function(scope, elem, 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();
      });

    }
  };
});

Answer 1

如果你想使用条形图,为什么不使用rect而不是path？IMO rect比描述更具描述性path.

这是我用来rect为它设置动画的示例.

http://plnkr.co/edit/2hEzBqIVgh0rgE3D0Pd4?p=preview

对于AngularJS,您只需设置width和to属性.

<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>

我想这个答案也很有帮助.
SVG ng-repeat'ed元素上的SMIL动画仅在页面加载时发生

Answer 2

如果您希望它只动画一次然后停止，请将repeatCount =“indefinite”替换为repeatCount =“1”fill =“freeze”

如果您确保值中的路径在命令的数量和类型中一致，您应该获得流畅的动画。这是一个例子：

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
    <path d="M100,200 L150,200" stroke="black" stroke-width="10" fill="none">
        <animate attributeName="d" values="M100,200 L150,200;M100,200 L200, 200" fill="freeze" begin="1s" dur="2s" />
    </path>
</svg>

SVG 测试套件有一个路径动画的示例。还有一个关于动画的 w3c 入门知识。