时间戳

首页 > 解决方案 > 基于 Javascript 变量值的多个 SVG 动画的设置时间已过

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

问题描述

目前，我正在研究需要为基于 javascript 变量值的多个 SVG 动画设置时间的东西。我可以使用它来为单个 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 的值，它就不起作用

标签： javascriptsvg

解决方案

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

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

推荐阅读