title: Stopping a svg animation
body: <p>I would like to stop a svg via Jquery. The svg image is placed directly into the DOM via viewHelper (like Typo3Fluid).
  If I add a class <code>.stop</code> with <code>animation-play-state: paused;</code> It doesn't pause the svg.</p>
  
  <p>JS:</p>
  
  <pre><code>    var bulletlist = function (container) {
      var self = this;
      this.container = container;
  
      $(".x-control", self.container).click(function() {
          //remove &amp; show button
          $(".x-control").toggleClass("x-play");
  
          //start and stop svg
          $(".wv_bulletlist svg").toggleClass("stop");
          //$(".wv_bulletlist svg").css("animation-play-state", "paused");
  
          return false;
      });
  };
  
  $(function () {
      $('.wv_bulletlist').each(function () {
          new bulletlist(this);
      });
  });
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>&lt;style&gt;path {
    stroke-dasharray: 125;
    stroke-dashoffset: 0;
    animation: dash 4s .01s linear forwards infinite;
  }
  #t-horizontal, #t-vertical {
    stroke-dasharray: 30;
    stroke-dashoffset: 0;
    animation-name: dash-short;
  }
  #t, #t-horizontal, #t-vertical {
    animation-delay: .5s;
  }
  #s {
    animation-delay: 1s;
  }
  @keyframes dash-short {
    from, 30% {
      stroke-dashoffset: 30;
    }
    76%, to {
      stroke-dashoffset: 0;
    }
  }
  @keyframes dash {
    from {
      stroke-dashoffset: 125;
    }
    67%, to {
      stroke-dashoffset: 0;
    }
  }&lt;/style&gt;
  </code></pre>
  
  <p>All of this has to be compatible with IE 11 and I can't know what svg will be placed there beforehand.
  Would appreciate any tips or suggestions.</p>
  
  <p>Kind regards</p>