javascript - 我正在使用 javascript 在动画（vivus.js）完成后显示 svg 文本

Question

我现在正在使用 Vivus.js 制作 svg 动画。

这是一个 SVG 线条动画，带有一些文本描述，位于 svg 的文本标签内。

因为vivus.js不能处理文字动画，所以我简单的先让文字的不透明度为0，等svg线条动画完成后，再让文字的不透明度为1，使其可见。

这是在codepen中导入 vivus.min.js 后放置的 .js 代码的主要部分：

// Making a svg line animation through Vivus.js, which works fine

var svg_product =
new Vivus('product', {
    type: 'scenario',
    duration: 100
});

// Make the <g id="text"> invisible before the animation is finished

var hidefirst = document.getElementById("text");
hidefirst.style.opacity = 0;

// Detect if the line animation is finished using strokeDashoffset

var line = document.getElementById("XMLID_202_");
var lineDetect = window.getComputedStyle(line).strokeDashoffset;

// After the line animation is finished, make <text> visible
// But the code seems doesn't work

if (lineDetect == "0px") {
    hidefirst.style.opacity = 1;
}

代码的最后一部分是我的问题。

我认为代码不起作用，因为我编写的“if 条件”在页面加载的一开始就被评估，即False。

因此我的问题是，如何正确跟踪 svg 行的strokeDashoffset，以便在window.getComputedStyle(line).strokeDashoffset变为“0px”后将文本的不透明度设为 1？

谢谢！

Answer 1