jquery - 停止 svg 动画

Question

我想通过 Jquery 停止 svg。 svg 图像通过 viewHelper(如 Typo3Fluid)直接放入 DOM。 如果我添加一个 .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在具有运行动画的相同路径元素上。