Question

当前，我正在处理一些需要设置时间的事情，该时间已基于JavaScript变量值针对多个SVG动画设置了x秒。我可以使用以下命令将其用于单个SVG元素：

var start = 5*3;
var animate = document.querySelector("svg");
console.log(animate);
animate.setCurrentTime(start);

完整代码：https://jsfiddle.net/kxv3mueb/

但是不能将其用于多个SVG元素

var start = 30;
var container = document.querySelector("#test");
var matches = container.querySelectorAll("svg");
console.log(matches);
matches.setCurrentTime(start);

完整代码：https://jsfiddle.net/c9ma2njy/，如果时间设置为30秒，则应以蓝色开头。看来我没有正确编写querySelectorAll()代码。

应该通过使用setAttribute（）在所有动画元素上设置“ begin”属性值来完成，但是如果我尝试设置起始值，则它不起作用。但是，如果我尝试在动画元素上设置“ dur”值，那么它将起作用。

var time = -15 + "s";
var b = document.querySelector("animate"); 
b.setAttribute("begin", time);

// it's work if I try to "dur" attribute value using this code
// the result I want is the sun starts on top, it's happened 15 seconds after the start

完整代码：（https://jsfiddle.net/n4odcypa/）

有人可以帮助我使它适用于每种方法吗？特别是使用queryselectorAll() + setAttribute()方法？

我更喜欢设置All的开始值，而不是使用setCurrentTime()方法，因为我已经使用JQuery的css（）方法设置了所有其他SVG的时间。

我尝试了jQuery的Attr（）方法，但与使用setAttribute（）相同，如果我想设置dur的值，它可以工作，但是如果我想设置begin的值，则不能工作

Answer 1

querySelectorAll返回元素列表，因此您需要遍历元素，即

var start = 30;
var container = document.querySelector("#test");
var matches = container.querySelectorAll("svg");
console.log(matches);
matches.forEach(match => match.setCurrentTime(start));

基于Javascript变量的值，多个SVG动画的设置时间已过去

1 个答案: