Home » Angularjs » animating SVG path when changing value

animating SVG path when changing value

Posted by: admin November 30, 2017 Leave a comment


I am trying to create a graph using SVG and angular directive to change the dynamic parts. Right now I’ve done this:


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>' +
        scope: {
          value: '='
        link: function(scope, elem, attr) {

I want my graph to look like this when it’s 100% value, and when the value is — let’s say — 45%, I would like to see this line but with only 45% of it’s length from the top center. I probably have to re-calculate the path value of the path but I wanted to ask, is it possible when I change the path with JS to make it animate while it’s changing the size?

Thank you in advance, or if any of you know a good tutorial on this stuff please link it to me.

EDIT: I changed the directive to a simple bar graph but this is just for example, I know this can be done without SVG since you can make it using divs but i want the chart to be more complex after.

Here’s a jsfiddle http://jsfiddle.net/fg9e7eo4/1/

In my example, the chart keeps animating and I would like to make it animate only once and than remain at that point.

By the way, this is the directive that I’m trying out to make it work:

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

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


If you want to use bar chart, why don’t you use rect instead of path?
IMO, rect is more descriptive than path.

Here is my example to use rect to animate it.


For AngularJS, you simply set width and to attribute.

<rect x="10" y="10" height="110" width="500"
     style="stroke:#ff0000; fill: #0000ff">

This answer is also helpful, I think.
SMIL animation on SVG ng-repeat'ed element only occurs on page load


If you want it to animate only once and then stop replace repeatCount=”indefinite” by repeatCount=”1″ fill=”freeze”

If you make sure the paths in the values are consistent in the numbers and types of command you should get smooth animation. Here’s an example:

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

The SVG testsuite has an example of path animation. and there’s a w3c primer on animation.


Not sure if you’re up for trying new plugins, but from the looks of Easy Pie Chart.js has what you want, it’s real quick to configure and pretty lightweight. If you’re set on using SVGs have a look at Raphael.js, I know for a fact you can animate SVGs (and even morph from one to another).

Hopefully this helps!

Leave a Reply

Your email address will not be published. Required fields are marked *