title: How to maintain original dashes in SVG after animating ?
body: <p>I have a SVG that i am trying to animate and i am using the following jQuery. What i really want to do is make an animation of the dotted line being drawn , while keeping the dots intact.</p>
  
  <pre><code>$(function () {
  
      $("#dotted-lines path").css({
          'fill': 'none'
      });
  
      var length;
  
      $("#dotted-lines path").each(function () {
  
          var $this = $(this);
          length = $this[0].getTotalLength();
          $this.attr('data-length', length).css({
              'stroke-dashoffset': length,
                  'stroke-dasharray': length
          });
  
      });
  
  
      $("#dotted-lines path").each(function () {
  
          $(this).animate({
              'stroke-dashoffset': 0
          }, {
  
              duration: 1000,
              easing: 'linear',
              complete: function () {
  
              }
          });
  
      });
  
  });
  </code></pre>
  
  <p>The above code can be seen in action <strong><a href="http://jsfiddle.net/rr7fn41v/1/" rel="nofollow">HERE</a></strong> , Now the line gets drawn perfectly , just the way i wanted it to be animated, but unfortunatly the line is no longer dashed. so how do i maintain the original dashes ? </p>
  
  <p>One more thing i tried was , on the below line:</p>
  
  <pre><code>$this.attr('data-length', length).css({'stroke-dashoffset': length, 'stroke-dasharray': length});
  </code></pre>
  
  <p>if i change it to:</p>
  
  <pre><code>        $this.attr('data-length', length).css({'stroke-dashoffset': length, 'stroke-dasharray': "5,3"});
  </code></pre>
  
  <p>I get the dashes but i don't get the drawing effect . so as i said , how do i maintain the original dashes ? </p>