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。

停止SVG动画

1 个答案: