tạo đường dẫn SVG khi thay đổi giá trị

Question

Tôi đang cố gắng tạo biểu đồ bằng cách sử dụng SVG và chỉ thị góc để thay đổi các phần động. Ngay bây giờ tôi đã làm điều này:

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) { 
     } 
    } 
}); 

Tôi muốn đồ thị của tôi trông như thế này khi nó 100% giá trị, và khi giá trị - giả sử - 45%, tôi sẽ thích xem dòng này nhưng chỉ với 45% chiều dài từ trung tâm trên cùng. Tôi có lẽ phải tính toán lại giá trị đường dẫn của con đường nhưng tôi muốn hỏi, có thể nào khi tôi thay đổi đường dẫn với JS để làm cho nó hoạt hình trong khi nó thay đổi kích thước?

Cảm ơn bạn trước hoặc nếu bạn biết hướng dẫn hay về nội dung này, hãy liên kết với tôi.

EDIT: Tôi đã đổi chỉ thị thành biểu đồ thanh đơn giản nhưng đây chỉ là ví dụ, tôi biết điều này có thể được thực hiện mà không có SVG vì bạn có thể sử dụng divs nhưng tôi muốn biểu đồ phức tạp hơn sau này.

Dưới đây là một jsfiddle http://jsfiddle.net/fg9e7eo4/1/

Trong ví dụ của tôi, bảng xếp hạng tiếp tục tạo hiệu ứng động và tôi muốn làm cho nó sinh động chỉ một lần và hơn vẫn ở thời điểm đó.

Bằng cách này, đây là chỉ thị mà tôi đang cố gắng ra để làm cho nó làm việc:

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

Nếu bạn muốn nó để animate chỉ một lần và sau đó dừng thay repeatCount = "vô thời hạn" bởi repeatCount = "1" fill = "freeze"

Nếu bạn đảm bảo đường dẫn trong các giá trị nhất quán trong các số và loại lệnh, bạn sẽ có được hoạt ảnh mượt mà. Dưới đây là một ví dụ:

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

Các TestSuite SVG có an example of path animation. và có một w3c primer on animation.

Answer 2

Nếu bạn muốn sử dụng biểu đồ thanh, tại sao bạn không sử dụng rect thay vì path? IMO, rect có tính mô tả hơn path.

Đây là ví dụ của tôi để sử dụng rect để tạo ảnh động.

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

Đối AngularJS, bạn chỉ cần đặt width và to thuộc tính.

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

Câu trả lời này cũng hữu ích, tôi nghĩ vậy.
SMIL animation on SVG ng-repeat'ed element only occurs on page load

Answer 3

Không chắc chắn nếu bạn đang lên cho cố gắng bổ sung mới, nhưng từ vẻ của Easy Pie Chart.js có những gì bạn muốn, đó là thực nhanh chóng để cấu hình và khá nhẹ. Nếu bạn đang thiết lập sử dụng SVG có một cái nhìn tại Raphael.js, tôi biết cho một thực tế bạn có thể animate SVGs (và thậm chí morph từ một đến khác).

Hy vọng điều này sẽ hữu ích!