Остановка SVG анимации

Question

Я хотел бы остановить svg через Jquery.Изображение SVG помещается непосредственно в DOM через viewHelper (например, Typo3Fluid).Если я добавлю класс .stop с animation-play-state: paused;, это не остановит svg.

JS:

    var bulletlist = function (container) {
    var self = this;
    this.container = container;

    $(".x-control", self.container).click(function() {
        //remove & 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);
    });
});

CSS:

<style>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;
  }
}</style>

Всеэто должно быть совместимо с IE 11, и я не могу знать, какой SVG будет размещен там заранее.Буду признателен за любые советы или предложения.

С уважением

Answer 1

Анимация прикреплена к одному или нескольким элементам <path>, ваш класс stop установлен для элемента с селектором ".wv_bulletlist svg".Свойства CSS-анимации не наследуются.Вы должны установить animation-play-state: paused для тех же элементов пути, которые имеют запущенную анимацию.