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

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() 在所有动画元素上设置“开始”属性值来完成，但如果我尝试设置开始值，它就不起作用。但是，如果我尝试在它正在工作的动画元素上设置“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));