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>

我认为这个答案也很有帮助 SMIL animation on SVG ng-repeat'ed element only occurs on page load

Answer 2

如果你想让它只动画一次，然后停止替换repeatCount =＆＃34;无限期＆＃34;通过repeatCount =＆＃34; 1＆＃34;填充=＆＃34;冻结＆＃34;

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

＆＃13;

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

＆＃13;

SVG测试套件有an example of path animation.，其中w3c primer on animation。

Answer 3

不确定您是否尝试使用新插件，但从Easy Pie Chart.js的外观中可以得到您想要的内容，配置非常快且非常轻巧。如果您开始使用SVG，请查看Raphael.js，我知道您可以为SVG设置动画（甚至可以从一个变换到另一个）。

希望这有帮助！

更改值时动画SVG路径

3 个答案: